<template>
	<view class="roll_center" v-for="item in AllTicket" key="index">
			<view class="money">
				<view class="count" v-if="item.couponType===131">
					￥{{item.discountAmount}}
				</view>
				<view class="count" v-else>
					打{{item.discountRate}}折
				</view>
				
				<view class="condition" v-if="item.conditionMet > 0">
					满{{item.conditionMet}}元可用
				</view>
				<view class="condition" v-else>
					无门槛
				</view>
			</view>
			<view class="info">
					<view class="introduce">{{item.couponName}}</view>
					<view class="date">
						<view style="display: inline-block;">
							<text style="color: #ff0000;font-size: 12px;display: block;">{{item.startValidTime}} &nbsp;&nbsp;&nbsp;</text>
							<text style="color: #ff0000;font-size: 12px;display: block;">{{item.endValidTime}} &nbsp;&nbsp;&nbsp;</text>
						</view>
							
					<button @click="getTicket(item)" style="display: inline-block; color: white; background-color: #004fef;"  size="mini">领取</button>
					</view>
			</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import request from '../../../utils/request';
import { getUserProfile } from "@/api/system/user"
	const AllTicket=ref([])
	const userId = ref('')
	const MerchantId =ref('')
	const key=ref('')
	const createTime= ref('')
	const endTime=ref('')
	onMounted(()=>{
		request({
			url:'/gyf/ticket/getAll',
			method:'get',
		})
		.then((res)=>{
			console.log("拿到的优惠券数据")
			console.log(res)
			AllTicket.value=res.data
		}).catch((err)=>{
			console.log(err)
		})
	})
	
	const getTicket=(e)=>{
		//首先获取用户的id
	  getUserProfile().then((res)=>{
	  userId.value=res.data.userId
	  MerchantId.value=e.merchantsId
	  key.value=e.key
	  createTime.value=e.createTime
	  endTime.value=e.endTime
		request({
				  url:'/gyf/ticket/grab?userId='+userId.value+'&MerchantId='+MerchantId.value
				  +'&key='+key.value+'&createTime='+createTime.value+'&endTime='+endTime.value,
				  method:'get',
		}).then((res)=>{
				  console.log(res)
		}).catch((err)=>{
				  console.log(err)
		})
	  }).catch((err)=>{
		  console.log(err)
	  }) 
	}
</script>

<style lang="scss" scoped>
	.roll_center{
		width: 95vw;
		height: 15vh;
		background-color: #e6e6e6;
		margin: 2vh auto;
		padding: 1vh 0px;
		border-radius:10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.money{
			width: 30%;
			height: 100%;
			background-color: #0055ff;
			text-align: center;
			border-radius: 10px;
			.count{
				margin: 3.5vh 0px 1vh 0px;
				font-size: 20px;
				color: white;
			}
			.condition{
				font-size: 14px;
				color:white;
			}
		}
		.info{
			width: 68%;
			height: 80%;
			margin-top: 1.5vh;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: space-between;
			font-size: 14px;
			padding: 1vh 0px 1vh 5vw;
			border-radius: 10px;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			border-left: 1px dashed dimgrey;
			.introduce{
				width: 70%;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}
</style>